<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>嫦娥奔月</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/animate.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <script defer src="js/utils.js"></script>
    <script defer src="js/index.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="music">
        <audio src="./media/BGM.mp3" controls></audio>
        <img src="./img/p1/yinle.png" alt="">
      </div>
      <div class="page load">
        <img class="moon-halo" src="./img/load/moonhalo.png" alt="">
        <img class="moon" src="./img/load/moon.png" alt="">
        <img class="cloud" src="./img/load/cloud.png" alt="">
        <div class="v-h-center loading">
          <img class="ce" src="./img/load/ce.png" alt="">
          <div class="progress">
            <div class="bar"></div>
          </div>
          <div class="h-center load-text">loading...<span>0</span>%</div>
        </div>
        <img class="lotus" src="./img/load/lotus.png" alt="">
      </div>
      <div class="page p1">
        <img class="title h-center" src="./img/p1/title.png" alt="">
        <img class="cloud" src="./img/load/cloud.png" alt="">
        <div class="moon">
          <img class="moon-halo" src="./img/p1/moonhalo.png" alt="">
          <img class="" src="./img/p1/moom.png" alt="">
        </div>
        <img class="tg" src="img/p1/top.png" alt="">
        <img class="lotus" src="./img/load/lotus.png" alt="">
        <img class="right-away h-center" src="./img/p1/立即奔月.png" alt="" onclick="page.next()">
      </div>
      <div class="page p2">
        <div class="moon">
          <img class="moon-halo" src="./img/p2/moonhalo.png" alt="">
          <img class="" src="./img/p2/moon.png" alt="">
          <img class="ce h-center" src="./img/p2/ce.png" alt="">
        </div>
        <img class="cloud" src="./img/load/cloud.png" alt="">
        <img class="lotus" src="./img/load/lotus.png" alt="">
        <div class="content h-center">
          <div class="title">
            <img src="./img/p2/zjt.png" alt="">
            <span>游戏规则</span>
            <img src="./img/p2/yjt.png" alt="">
          </div>
          <div class="text">在规定时间内，击打小白兔，打到规定数量的“小白兔”则挑战成功，你就可以帮嫦娥成功奔月，注意，其中打到“青蛙”，则直接挑战失败</div>
          <div class="rule">
            <div>
              <img src="./img/p2/rabbit.png" alt="">
              <img src="./img/p2/duigou.png" alt="">
            </div>
            <div>
              <img src="img/p2/frog.png" alt="">
              <img src="img/p2/cuo.png" alt="">
            </div>
          </div>
        </div>
        <img class="right-away h-center" src="./img/p2/立即开始.png" alt="" onclick="page.next()">
      </div>
      <div class="page p3">
        <div class="moon">
          <img class="moon-halo" src="./img/p3/moonhalo.png" alt="">
          <img class="" src="./img/p3/moon.png" alt="">
        </div>
        <img class="cloud" src="./img/load/cloud.png" alt="">
        <div class="header">
          <div class="left">
            <img src="./img/p3/clock.png" alt="">
            还剩余
            <span class="count">54s</span>
          </div>
          <div class="right">
            <img class="header-rabbit" src="./img/p3/smallrabbitpng.png" alt="">
            共击中
            <span>
              <b class="current">87</b>/
              <b class="total">100</b>
            </span>
          </div>
        </div>
        <ul class="list">
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
          <li><img src="" alt=""></li>
        </ul>
        <div class="mask">
          <div class="success">
            <img class="status" src="./img/p3/挑战成功.png" alt="">
            <img class="flight right-away" src="./img/p3/助娥奔月.png" alt="">
          </div>
          <div class="fail">
            <img class="status" src="./img/p3/挑战失败.png" alt="">
            <img class="again right-away" src="./img/p3/再来一次.png" alt="">
            <img class="go-home right-away" src="./img/p3/返回首页.png" alt="">
          </div>
        </div>
      </div>
      <div class="page p4">
        <div class="cloud-list">
          <img class="cloud" src="./img/load/cloud.png" alt="">
          <img class="cloud" src="./img/load/cloud.png" alt="">
        </div>
        <div class="moon">
          <img class="" src="./img/p4/moon.png" alt="">
        </div>
        <img class="lotus" src="./img/load/lotus.png" alt="">
        <img class="ce" src="./img/p4/ce.png" alt="">
        <img class="right-away h-center" src="./img/p4/助娥奔月+1.png" alt="">
        <div class="petal">
        </div>
      </div>
      <div class="page p5">
        <img class="cloud" src="./img/load/cloud.png" alt="">
        <div class="content">
          <div class="header">
            <img class="title" src="./img/p5/title.png" alt="">
            <div class="right">
              <img class="moon" src="./img/p5/moon.png" alt="">
              <img class="ce" src="./img/p5/ce.png" alt="">
            </div>
          </div>
          <div class="text">
            <p></p>
            <p></p>
            <p></p>
            <p><span></span></p>
          </div>
        </div>
        <img class="lotus" src="./img/load/lotus.png" alt="">
        <img class="right-away h-center" src="./img/p5/返回首页.png" alt="" onclick="page.goHome()">
      </div>
    </div>
  </body>
</html>
